//TODO:标签的页面<template>
  <div class="container">
    <el-card class="subject_container">
      <!-- 头部搜索栏 -->
      <el-form :inline="true" :model="page" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <el-form-item label="标签名称">
                <el-input
                  v-model.trim="page.tagName"
                  size="small"
                  @keyup.delete.native="clearKeys"
                  @keyup.enter.native="filterBtn(page)"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" style="margin-left: 25px">
            <div class="grid-content bg-purple">
              <el-form-item label="状态">
                <el-select
                  v-model="page.state"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="clearKeys">清除</el-button>
                <el-button size="small" type="primary" @click="filterBtn(page)"
                  >搜索</el-button
                >
              </el-form-item>
            </div>
          </el-col>
          <el-col
            :span="6"
            :push="1"
            style="text-align: right; padding-right: 30px"
          >
            <el-form-item>
              <!-- 学科跳转显示 -->
              <el-button
                type="text"
                icon="el-icon-back"
                v-if="subjectID"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button icon="el-icon-edit" type="success" @click="addTags"
                >新增标签
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 总数据 -->
      <el-row>
        <el-col :span="24">
          <div class="info">
            <i class="el-icon-info"></i>
            <span>数据一共{{ counts }}条</span>
          </div>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="TagsList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="标签名称" prop="tagName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="addDate">
          <template slot-scope="{ row }">
            <!-- 将时间进行格式化 -->
            {{ row.addDate | filterTime }}
          </template>
        </el-table-column>

        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">
            <span v-if="row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right">
          <!-- 插槽 -->
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="disabledBtn(scope.row)">
              {{ scope.row.state === 1 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              @click="editTags(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              @click="deleteTags(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          background
          :total="counts"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 15, 20]"
          :current-page.sync="page.page"
          layout="prev,pager,next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 新增标签的弹层组件 -->
    <tagsAdd
      ref="tagsAdd"
      :show-dialog.sync="showDialog"
      :subjects="subjects"
      @getTagsList="getTagsList"
      :title="title"
    ></tagsAdd>
  </div>
</template>

<script>
import { getTagsList, deleteTags, tagsState, getSubjects } from '@/api/hmmm/tags'
import tagsAdd from '../components/tags-add'
import dayjs from 'dayjs'
export default {
  name: 'TagsPage',
  components: {
    tagsAdd
  },
  data () {
    return {
      // 放置页码相关的数据
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 页码大小
        tagName: '', // 标签名称,
        pages: 0, // 页码
        state: null // 页码
      },
      TagsList: [], // 用于保存标签列表的数据
      counts: 1, // 页码数
      showDialog: false, // 是否显示标签弹出层
      subjects: [], // 保存简单学科列表的数据
      title: 'add', // 默认为新增标签
      subjectID: '' // 点击学科分类传过来的值
    }
  },
  created () {
    // 页面一刷新就获取标签列表
    this.getTagsList()
  },
  watch: {
    '$route.query.subjectID': {
      handler () {
        // 把标签显示到顶层
        if (this.$route.query.subjectID) {
          this.subjectID = this.$route.query.subjectID.subjectName
          this.page.subjectID = this.$route.query.subjectID.id
          this.getTagsList() // 重新渲染标签列表
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // XXX:处理页码大小的事件
    handleSizeChange (newPagesize) {
      // newPagesize是当前点击的页面大小
      this.page.pagesize = newPagesize
      this.getTagsList()
    },
    // XXX:当前页变动时候触发的事件
    handleCurrentChange (newPage) {
      // newPage是当前点击的页码
      this.page.page = newPage // 将当前页面赋值给最新的页码
      this.getTagsList()
    },
    // XXX:获取标签列表数据的方法
    async getTagsList () {
      const { data } = await getTagsList(this.page)
      this.counts = data.counts // 页码总数
      this.TagsList = data.items // 将标签列表数据赋值给TagsList
    },
    // XXX:删除标签列表数据的方法
    async deleteTags (row) {
      try {
        await this.$confirm('此操作将永久删除该标签, 是否继续?')
        await deleteTags(row) // 调用删除接口
        this.getTagsList() // 重新获取标签列表数据
        this.$message.success('标签删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // XXX:按钮启用禁用的方法
    disabledBtn (row) {
      if (row.state === 1) {
        // 禁用
        row.state = 0
        this.$message.success('操作成功')
      } else {
        // 启用
        row.state = 1
        this.$message.success('操作成功')
      }
      // XXX:修改标签状态的方法
      tagsState({
        id: row.id,
        state: row.state
      })
    },
    // XXX:点击清除按钮,清空input框的方法
    clearKeys () {
      this.page.tagName = ''
      this.page.state = null
      this.page.page = 1
      this.getTagsList() // 重新渲染标签列表
    },
    // XXX: 标签筛选的方法
    async filterBtn (page) {
      this.page.tagName = page.tagName
      this.page.state = page.state // 根据状态进行选择
      await this.getTagsList() // 重新渲染标签列表
    },
    // XXX:点击新增标签按钮执行的方法
    async addTags () {
      this.showDialog = true
      const { data } = await getSubjects() // 获取学科数据
      this.subjects = data
      // 显示新增标题
      this.title = 'add'
    },
    // XXX:编辑标签列表的方法
    async editTags (obj) {
      // 打开弹出层
      this.showDialog = true
      const { data } = await getSubjects(obj.subjectName)
      this.subjects = data
      // 父向子
      this.$refs.tagsAdd.getTagsDetails(obj)
      this.title = 'edit'
    }
  },
  // XXX:处理时间的过滤器
  filters: {
    filterTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style scoped >
.info {
  height: 35px;
  line-height: 35px;
  margin-bottom: 15px;
  font-size: 14px;
  color: rgb(144, 147, 153);
  background-color: rgb(244, 244, 245);
}
.el-icon-info {
  padding: 0 10px;
}
</style>
